<template>
	<view class="PersonalCenter">
		<!-- 标题 以及 用户信息 -->
		<view class="PersonalCenter-header">
			<view class="PersonalCenter-flex flex align-center">
				<view class="PersonalCenter-image flex align-center justify-center margin round bg-gray">
					<image v-if="getUserInfoValue.avatar" :src="getUserInfoValue.avatar" mode="aspectFill"></image>
					<image v-else src="@/static/userInfo/avatar.png" mode="aspectFill"></image>
				</view>
				<view class="PersonalCenter-userinfo">
					<view class="text-bold margin-tb-sm">{{getUserInfoValue.nickName || '用户昵称'}}</view>
					<view class="text-sm">
						<text class="cuIcon-vip " :class="[getUserInfoValue.isVip ? 'text-red' : 'text-grey']"></text>
						<text v-if="getUserInfoValue.isVip"
							class="text-grey">会员有效期：{{getUserInfoValue.vipExpire}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="PersonalCenter-content">
			<!-- 横轴导航 -->
			<view class="PersonalCenter-x-nav  bg-white padding margin-lr">
				<view @click="navFn('/personPages/Collect/index')" class="flex align-center justify-center">
					<view class="margin-bottom-xs ">
						<image src="@/static/userInfo/star.png" mode="scaleToFill"></image>
					</view>
					<text class="text-black">我的收藏</text>
				</view>
				<view @click="navFn('/personPages/ReadHistory/index')" class="flex align-center justify-center">
					<view class="margin-bottom-xs ">
						<image src="@/static/userInfo/note.png" mode="scaleToFill"></image>
					</view>
					<text class="text-black">阅读记录</text>
				</view>
				<view @click="navFn('/personPages/Audio/index')" class="flex align-center justify-center">
					<view class="margin-bottom-xs ">
						<image src="@/static/userInfo/audio.png" mode="scaleToFill"></image>
					</view>
					<text class="text-black">我的录音</text>
				</view>
				<view @click="navFn('/personPages/Del/index')" class="flex align-center justify-center">
					<view class="margin-bottom-xs ">
						<image src="@/static/userInfo/delete.png" mode="scaleToFill"></image>
					</view>
					<text class="text-black">回收站</text>
				</view>
			</view>
			<!-- 纵轴导航 -->
			<view class="PersonalCenter-y-nav cu-list menu card-menu margin-top">
				<view @click="navFn('/personPages/Share/index')" class="cu-item">
					<view class="content flex align-center">
						<image style="width: 40upx;height: 40upx" src="@/static/userInfo/vip.png" mode="scaleToFill">
						</image>
						<text class="text-grey margin-left text-black">分享送VIP</text>
					</view>
				</view>
				<view @click="show=true" class="cu-item PersonalCenter-contact">
					<view class="content flex align-center">
						<image style="width: 40upx;height: 40upx" src="@/static/userInfo/custom.png" mode="scaleToFill">
						</image>
						<text class="text-grey margin-left text-black">在线客服</text>
					</view>
					<view class="text-grey text-sm">工作时间：9：00 - 21:00</view>
					<!-- <button  type="default" plain="true" open-type="contact" @contact="contact"></button> -->
				</view>
				<view @click="navFn('/personPages/Protocol/index')" class="cu-item arrow">
					<view class="content flex align-center">
						<image style="width: 40upx;height: 40upx" src="@/static/userInfo/protocol.png"
							mode="scaleToFill"></image>
						<text class="text-grey margin-left text-black">协议</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 制作和添加新绘本 -->
		<MakeAdd type="PersonalCenter" />
		<!-- 客服 -->
		<ImageModal label="扫码添加客服" @confirm="saveFn" @cancel="show=false" :show="show" :value="csQrCode" />
	</view>
</template>

<script>
	import CuCustom from '@/uni_modules/colorui/components/cu-custom.vue';
	import MakeAdd from '@/plugin/make_add.vue'
	import ImageModal from '@/plugin/image_modal.vue';

	import * as UserInfoApi from '@/api/UserInfo/index.js'

	import userInfoConfig from '@/utils/userInfo_config.js';

	export default {
		mixins: [userInfoConfig],
		components: {
			CuCustom,
			MakeAdd,
			ImageModal
		},
		data() {
			return {
				// 导航栏高度
				CustomBar: this.CustomBar,
				csQrCode: '',
				show: false
			}
		},
		onLoad() {
			this.getcsQrCode();
		},
		methods: {
			// 获取客服二维码
			async getcsQrCode() {
				let res = await UserInfoApi.setting();
				if (res.code === 0) {
					this.csQrCode = res.data.csQrCode;
				}
			},
			// 跳转功能
			navFn(value) {
				uni.navigateTo({
					url: value
				})
			}
		}
	}
</script>

<style lang="scss">
	.PersonalCenter {
		width: 100vw;
		// background: url('@/static/userInfo/background.png');
		// background-size: 100%;
		// background-repeat: no-repeat;
		// background-position: center;

		.PersonalCenter-header {
			height: 260upx;
			background:
				linear-gradient(to bottom, $theme-color 0%, #f8f8f8 100%);

			.PersonalCenter-flex {

				// height: 100%;
				.PersonalCenter-image {
					width: 140upx;
					height: 140upx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}

					text {
						font-size: 80upx;
					}
				}
			}
		}

		.PersonalCenter-content {
			transform: translateY(-60upx);
			width: 100vw;

			.PersonalCenter-x-nav {
				display: grid;
				grid-template-columns: repeat(4, auto);
				border-radius: 16upx;
				grid-gap: 20upx;

				>view {
					flex-direction: column;

					>view {
						border-radius: 20upx;
						width: 100upx;
						height: 100upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

				}

				// >view:nth-child(1) {
				// 	>view {
				// 		box-shadow: 0 0 10upx #0081ff,
				// 			inset 0 0 10upx #0081ff;

				// 	}
				// }

				// >view:nth-child(2) {
				// 	>view {
				// 		box-shadow: 0 0 10upx #f37b1d,
				// 			inset 0 0 10upx #f37b1d;
				// 	}
				// }

				// >view:nth-child(3) {
				// 	>view {
				// 		box-shadow: 0 0 10upx #6739b6,
				// 			inset 0 0 10upx #6739b6;
				// 	}
				// }

				// >view:nth-child(4) {
				// 	>view {
				// 		box-shadow: 0 0 10upx #1cbbb4,
				// 			inset 0 0 10upx #1cbbb4;
				// 	}
				// }
			}

			.PersonalCenter-y-nav {
				.PersonalCenter-contact {
					position: relative;

					button {
						position: absolute;
						left: 0;
						top: 0;
						width: 100% !important;
						height: 100% !important;
						border: 0 !important;
						outline: none !important;
					}
				}
			}
		}

	}
</style>